<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tailwind 京东版</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css ">
    <style>
        
            *{
                margin: 0;
                padding: 0;
            }


            html{
                    height: 100%;

            }

            body{
                    height: 100%;

            }


            .header{
                height: 100px;
            

            }
            .container{
                height: 400px;
                background-color: red;
                position: relative;

            }
            .footer {
                    height: calc(100% - 500px);
                  

            }
            .login-box{
                        width: 300px;
                        height: 280px;
                        position: absolute;
                        right: 100px;
                        top: 50px;
                        background-color: white;
                        padding: 10px;

            }
            .login-box  .login-box-inner{
                        width: 100%;
                        height: 100%;
                        
            }

            .login-header{

                display: flex;
                flex-direction: row;
                
            }

            .login-box  .login-box-inner h3{
                    width: 50%;
                    height: 100px;
                
                    text-align: center;
                    line-height: 100px;
            }
            .login-form-input {
                display: flex;
                flex-direction: row;  
                margin-top: 20px;
               

            }
            .login-form-input  input{
                    width: 200px;
                    height: 30px;
                    border: none;
                    outline: none;
            }
            .login-form-button{
                     width: 100%;
                    height: 30px;
                    background-color: red;
                    margin-top: 20px;
            }

            .login-form-button  input[type="button"]{
                        width: 100%;
                        height: 100%;
                        border: none;
                        outline: none;
                        background-color: brown;
                        color: wheat;
                        cursor: pointer;
            }

            .login-form-button  input[type="button"]:active{
                    background-color: black;
            }
            .login-form-input  span ,label{
                border: 1px solid  black;
                display: inline-block;

            }
            .login-form-input  span {
                width: 250px;

            }
            .login-form-input  label {
                width: 40px;
                text-align: center;

            }
   

    </style>

</head>
<body>
    
        <div class="header"></div>
        <div class="container">
                        <div class="login-box">
                                   <div class="login-box-inner">
                                                <div class="login-header">
                                                        <h3>扫描登录</h3>
                                                        <h3>账户登录</h3>
                                                </div>
                                                <div class="login-form-input">
                                                        <label>
                                                                     <i class="fa fa-user fa-2x"></i>   

                                                        </label>
                                                      <span>
                                                              <input type="text">
                                                      </span>          
                                                </div>
                                                <div class="login-form-input">
                                                        <label>
                                                                <i class="fa  fa-lock fa-2x"></i>

                                                        </label>
                                                         <span>
                                                                 <input type="text">
                                                         </span>          
                                                </div>
                                                <div class="login-form-button">
                                                       <input type="button" value="登录">      
                                                </div>
   


                                   </div>

                        </div>


        </div>
        <div class="footer"></div>


</body>
</html>